<template>
	<view class="moive">
		<u-navbar class="ttp" title="电影首页" @leftClick="leftClick()" @rightClick="rightClick" :autoBack="true">
			<view class="u-nav-slot" slot="right">
				<u-icon name="map-fill" size="19"></u-icon>
				<text class="addre_wid">{{address}}</text>
			</view>
		</u-navbar>
		<view class="content">
			<view class="tabs_box">
				<view :class="act==0?'act':'tab'" @click="tabs(0)">
					热映
				</view>
				<view :class="act==1?'act':'tab'" @click="tabs(1)">
					影院
				</view>
				<view @click="gohis" class="his">
					历史订单
				</view>
			</view>

			<u-tabs v-if="act==0" :list="list1"
				itemStyle="padding-left: 32rpx; padding-right: 32rpx; height: 80rpx;background: #fff;"
				:activeStyle="{color: '#000000',fontWeight: 'bold'}" :lineColor="'#FC6758'" @click="click">
			</u-tabs>

			<view v-if="act==0 && act2==1" class="moive_box">
				<view v-for="(item,index) in molist" class="item">
					<view class="left">
						<image :src="item.cover" mode=""></image>
						<view class="info">
							<view class="name">
								{{item.filmName}}
							</view>
							<view class="about">
								评分：{{item.score}}
							</view>
							<view class="about">
								{{item.castType==0?'主演':'配音'}}：{{item.cast}}
							</view>
							<view class="detail">
								{{item.introduction}}
							</view>
						</view>
					</view>
					<view class="right">
						<view @click="choicecinema(item.id)" class="sell">
							购票
						</view>
						<!-- 	<view class="usell">
							预售
						</view> -->
					</view>
				</view>
			</view>

			<view v-if="act==0 && act2==2" class="moive_box2">
				<view v-for="(item,index) in wmolist" class="item">
					<view class="left">
						<image :src="item.cover" mode=""></image>
						<view class="info">
							<view class="name">
								{{item.filmName}}
							</view>
							<!-- 	<view class="about">
								评分：{{item.score}}
							</view> -->
							<view class="about">
								{{item.castType==0?'主演':'配音'}}：{{item.cast}}
							</view>
							<view class="detail">
								{{item.introduction}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="act==1" class="car_box">
				<view v-for="(item,index) in cilist" @click="choicemovie(item.id)" class="item">
					<view class="left">
						<view class="name">
							{{item.cinemaName}}
						</view>
						<view class="where">
							{{item.address}}
						</view>
					</view>
					<view class="right">
						<!-- <view class="price">
							<text style="color: red;font-size: 30rpx;">19.9元</text>
							<text class="qi">起</text>
						</view> -->
						<view class="juli">
							{{item.distance | distance}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFilmList,
		getCinema,
		filmlocal
	} from '@/api/oil'
	export default {
		data() {
			return {
				address: '',
				act: 0,
				act2: 1,
				// userLatStr: '36.712362', //用户地点纬度
				// userLngStr: '119.170778', //用户地点经度
				userLatStr: '', //用户地点纬度
				userLngStr: '', //用户地点经度
				cid: '',
				cilist: [],
				molist: [],
				wmolist: [],
				list1: [{
						name: '正在热映',
						value: 1
					},
					{
						name: '即将上映',
						value: 2
					}
				]
			}
		},
		filters: {
			distance(text) {
				let str
				let num = parseInt(text)
				if (num < 1000) {
					str = num + '米'
				} else {
					let s1 = num.toString()
					let s2 = s1.slice(0, 1)
					let s3 = s1.slice(1, 2)
					str = s2 + '.' + s3 + '公里'
				}
				return str
			}
		},
		onLoad(option) {
			let _that = this;
			// this.userLatStr = '36.712362'; //用户地点纬度
			// this.userLngStr = '119.170778'; //用户地点经度
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log(1)
					_that.userLatStr = res.latitude;
					_that.userLngStr = res.longitude;

					if (option.city) {
						console.log(2)
						_that.address = option.city
						_that.cid = option.id
						_that.getCinema();
						_that.getFilmList();
						_that.getFilmList2();
					} else {
						console.log(3)
						_that.filmlocal()
					}
				},
				fail() {
					console.log(4)
					if (option.city) {
						console.log(5)
						_that.address = option.city
						_that.cid = option.id
						_that.getCinema();
						_that.getFilmList();
						_that.getFilmList2();
					} else {
						console.log(6)
						uni.navigateTo({
							url: './citychoice'
						})
					}
				}
			});


			// this.getCinema();
			// this.getFilmList();
			// console.log(decodeURIComponent(option.id), decodeURIComponent(option.city))
			// console.log(option.id, option.city)

		},
		methods: {
			filmlocal() {
				let data = {
					longitude: this.userLngStr,
					latitude: this.userLatStr
				}
				// console.log(data)
				filmlocal(data).then(res => {
					// console.log(res, 688)
					// return
					if (res.data.id) {
						this.address = res.data.city_name;
						this.cid = res.data.id
						this.getCinema();
						this.getFilmList();
						this.getFilmList2();
					} else {
						uni.navigateTo({
							url: './citychoice'
						})
					}
				})
			},
			getFilmList() {
				let sss = {
					type:0,
					cityId:this.cid
				}
				getFilmList(sss).then(res => {
					if (res.success == 1) {
						this.molist = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			getFilmList2() {
				let sss = {
					type:1,
					cityId:this.cid
				}
				getFilmList(sss).then(res => {
					if (res.success == 1) {
						this.wmolist = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			getCinema() {
				let data = {
					cityId: this.cid,
					longitude: this.userLngStr,
					latitude: this.userLatStr
				}
				getCinema(data).then(res => {
					if (res.success == 1) {
						this.cilist = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			click(item) {
				this.act2 = item.value
			},
			tabs(i) {
				this.act = i;
			},
			gohis() {
				uni.navigateTo({
					url: './movieList'
				})
			},
			rightClick() {
				uni.navigateTo({
					url: './citychoice'
				})
			},
			leftClick() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			choicecinema(id) {
				uni.navigateTo({
					url: `./choicecinema?id=${id}&cid=${this.cid}&userLatStr=${this.userLatStr}&userLngStr=${this.userLngStr}`
				})
			},
			choicemovie(id) {
				// uni.navigateTo({
				// 	url: './choicemovie?id=' + id
				// })
				uni.navigateTo({
					url: `./moviechoice?id=${id}&cid=${this.cid}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f4f4f4;
	}

	.ttp {
		padding-top: var(--status-bar-height);
	}

	.moive {
		width: 100%;

		.content {
			// padding: 20rpx;

			.tabs_box {
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				position: relative;
				// margin-bottom: 30rpx;

				.tab {
					width: 116rpx;
					height: 52rpx;
					color: #FC6758;
					line-height: 52rpx;
					text-align: center;
					border: 2rpx solid #FC6758;
					// border-radius: 30rpx;
					font-size: 30rpx;
				}

				.act {
					width: 120rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					background: #FC713E;
					color: #FFFFFF;
					font-size: 30rpx;
					// border-radius: 30rpx;
				}

				.his {
					color: #FC6758;
					font-size: 30rpx;
					position: absolute;
					right: 10rpx;
				}
			}

			.moive_box {
				// width: 100%;
				padding: 20rpx;

				.item {
					// background: #FFFFFF;
					padding: 20rpx;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;

					.left {
						width: 80%;
						display: flex;
						align-items: center;

						image {
							width: 155rpx;
							height: 180rpx;
							margin-right: 30rpx;
							border-radius: 10rpx;
						}

						.info {
							width: 60%;

							.name {
								font-size: 34rpx;
							}

							.about {
								width: 100%;
								font-size: 22rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.detail {
								width: 100%;
								color: rgba(0, 0, 0, 0.3);
								font-size: 22rpx;
								display: -webkit-box;
								overflow: hidden;
								text-overflow: ellipsis;
								word-wrap: break-word;
								white-space: normal !important;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
						}
					}

					.right {
						.sell {
							width: 110rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							color: #FFFFFF;
							background: #EB3E3D;
							border-radius: 20rpx;
							font-size: 30rpx;
						}

						.usell {
							width: 110rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							color: #FFFFFF;
							background: #389EE0;
							border-radius: 20rpx;
							font-size: 30rpx;
						}
					}
				}
			}

			.moive_box2 {
				// width: 100%;
				padding: 20rpx;

				.item {
					// background: #FFFFFF;
					padding: 20rpx;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;

					.left {
						width: 95%;
						display: flex;
						align-items: center;

						image {
							width: 155rpx;
							height: 180rpx;
							margin-right: 30rpx;
							border-radius: 10rpx;
						}

						.info {
							width: 70%;

							.name {
								font-size: 34rpx;
							}

							.about {
								width: 100%;
								font-size: 22rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.detail {
								width: 100%;
								color: rgba(0, 0, 0, 0.3);
								font-size: 22rpx;
								display: -webkit-box;
								overflow: hidden;
								text-overflow: ellipsis;
								word-wrap: break-word;
								white-space: normal !important;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
						}
					}
				}
			}

			.car_box {
				width: 100%;

				.item {
					background: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 25rpx 15rpx;
					// margin-bottom: 20rpx;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.2);

					.left {
						width: 80%;

						.name {
							font-size: 32rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-bottom: 10rpx;
						}

						.where {
							color: rgba(0, 0, 0, 0.5);
							font-size: 27rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.right {
						width: 15%;
						text-align: right;

						.juli {
							padding-top: 30rpx;
							font-size: 22rpx;
							color: rgba(0, 0, 0, 0.25);
						}

						.qi {
							font-size: 22rpx;
							color: rgba(0, 0, 0, 0.25);
						}
					}
				}
			}
		}
	}

	.u-nav-slot {
		width: 230rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: flex;
		font-size: 34rpx;
	}

	.addre_wid {
		width: 210rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
